<template>
    <template v-for="item in menuList">
        <!-- 分为两种方式渲染：有子菜单和没有子菜单-->
        <!--      没有子菜单-->
        <el-menu-item :index="item.path" v-if="item.children.length == 0" :key="item.path">
                <el-icon v-if="item.icon"><svg-icon slot="prefix" :name="item.icon" width="18px"
                        height="18px" /></el-icon>
                <span>{{ item.menuName }}</span>
        </el-menu-item>

        <el-sub-menu :index="item.path" v-if="item?.children?.length > 0">
            <template #title>
                    <el-icon v-if="item.icon"><svg-icon slot="prefix" :name="item.icon" width="18px"
                            height="18px" /></el-icon>
                    <span>{{ item.menuName }}</span>
            </template>
            <!--        有子菜单的继续遍历（递归）-->
            <MenuTree :menuList="item.children"></MenuTree>
        </el-sub-menu>
    </template>
</template>
<script setup lang="ts">
// 声明 props - 对象格式  在script 中不使用props拿不到数据， <template>中自动解构
const props = defineProps({
    menuList: Array<any>
})
</script>
<script lang="ts">
export default {
    name: "MenuTree"
}
</script>